<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"
      :hideButton="true"
    />
    <div class="app-container" ref="block">
      <div class="containerMain">
        <div class="search-item">
          <div class="item-list">
            <div class="item-con">
              <span>时间</span>
              <el-date-picker
                  v-model="timeValue"
                  unlink-panels
                  size="mini"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
            </div>
            <div class="item-con">
              <span>uuid</span>
              <el-input style="width:200px" size="mini" v-model="searchform.bindUuid" placeholder="请输入uuid"></el-input>
            </div>
            <div class="item-con">
              <span>视讯号码</span>
              <el-input style="width:200px" size="mini" v-model="searchform.videoNum" placeholder="请输入视讯号码"></el-input>
            </div>
            <div class="item-con">
              <span>绑定状态</span>
              <el-select
                size="mini"
                clearable
                v-model="searchform.bindType"
                placeholder="全部"
              >
                <el-option label="绑定" value="1"></el-option>
                <el-option label="解绑" value="2"></el-option>
              </el-select>
            </div>
          </div>
          <div class="item-btn">
            <el-button class="kyeup_search_btn" type="primary" size="mini" @click="() => fetchData()">查询</el-button>
            <el-button type="default" size="mini" @click="() => reset()">重置</el-button>
          </div>
        </div>
        <div class="container">
          <div class="div-table">
            <el-table
              :header-cell-style="headerStyle"
              :data="list"
              element-loading-text="Loading"
              
              size="mini"
              highlight-current-row
              :height="tableHeight"
            >
              <el-table-column label="记录时间">
                <template slot-scope="scope">{{ scope.row.beginTime }}</template>
              </el-table-column>
              <el-table-column label="uuid">
                <template slot-scope="scope">{{ scope.row.bindUuid }}</template>
              </el-table-column>
              <el-table-column label="视讯号">
                <template slot-scope="scope">{{ scope.row.videoNum }}</template>
              </el-table-column>
              <el-table-column label="绑定状态">
                <template slot-scope="scope">{{ scope.row.bindType | statusFilter }}</template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <pagination :pagination="pagination" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import moment from "moment";
import selectModule from "@/components/common/selectmodulecopy";
import inputModule from "@/components/common/inputmodule";
import { fetchList } from "@/api/systemapi/numberbind";
import { pageParams } from "@/settings";

export default {
  name: "NumberBind",
  components: {
    Pagination,
    HeaderTitle,
    selectModule,
    inputModule
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "绑定",
        2: "解绑"
      };
      return statusMap[status];
    },
  },
  data() {
    const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
    const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
    return {
      entNum:"",
      titleList: [{ title: "视讯号码绑定记录" }],
      timeValue: [TODAYSTART, TODAYEND],//时间
      tableHeight: "300", //表格默认高度
      // treeData: null,
      list: null,
      listLoading: true,
      searchform: {
        bindUuid: "",
        videoNum: "",
        bindType: "",
        rows: "20",
        page: "1",
        startTime:"",
        endTime:"",
      },
      // 分页
      pagination: {
        pageSizes: [20, 50, 100], // 分页下拉框
        pageSize: 10, // 分页默认条数
        currentPage: 1, // 默认页数
        total: 1 // 默认总条数
      },
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function() {
      this.searchform.page = this.pagination.currentPage;
      this.fetchData();
    },
    "pagination.pageSize": function() {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.fetchData();
    }
  },
  mounted() {
    this.$nextTick(() => {
      let self = this;
      this.tableHeight = this.$refs.block.offsetHeight - 220;
      window.onresize = () => {
        return (() => {
          this.tableHeight = this.$refs.block.offsetHeight - 220;
        })();
      };
    });
    this.fetchData();
  },
  methods: {
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    // 重置搜索，刷新列表
    reset() {
      const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
      const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
      this.timeValue = [TODAYSTART, TODAYEND],
      this.searchform = {
        startTime:this.timeValue[0],
        endTime:this.timeValue[1],
        bindUuid: "",
        videoNum: "",
        bindType: "",
        rows: "20",
        page: "1"
      }
      // this.fetchData();
    },
    fetchData() {
      console.log(this.timeValue,"this.timeValue");
      if (this.timeValue != null && this.timeValue.length > 0) {
          this.searchform.startTime = moment(this.timeValue[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.searchform.endTime = moment(this.timeValue[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
      }
      console.log(this.searchform.startTime,"231232312");
      fetchList({...this.searchform}).then(response => {
        if(response.code==0){
          this.list = response.data.list;
          this.pagination.total = response.data.records;
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
      });
    }
  }
};
</script>
<style lang="scss">
.tree-con{
  .el-tree-node__content{
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss" scoped>
.containerMain {
  .search-item {
    padding: 20px 10px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    .item-list{
      display: flex;
      flex-wrap: wrap;
    }
    .item-con {
      display: flex;
      margin-right: 30px;
      margin-top: 20px;
      span {
        display: inline-block;
        line-height: 28px;
        margin-right: 10px;
      }
    }
    .item {
      width: 180px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
  .item-btn {
    margin-top: 20px;
    flex: 0 0 140px;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
